<template>
  <a-card :title="name" hoverable @click="goDetail" class="scale">
    <template #extra>
      <EdgexTag />
    </template>
    <div class="grid gap-y-2">
      <div class="flex items-end justify-between">
        <div>
          <a-tag class="id">{{ id }}</a-tag>
        </div>
        <div class="flex flex-col items-end status">
          <a-tag color="blue" v-if="status === '可用'">{{ status }}</a-tag>
          <a-tag color="red" v-else>{{ status }}</a-tag>
        </div>
      </div>
      <p>描述：{{ description }}</p>
      <p>前缀：{{ prefix }}</p>
      <p>创建时间：{{ created_time }}</p>

      <StarTwoTone
        twoToneColor="orange"
        class="absolute right-2"
        v-if="followed"
      />
    </div>
  </a-card>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, reactive } from "vue";
import EdgexTag from "../tags/EdgexTag.vue";
import { StarTwoTone } from "@ant-design/icons-vue";
import { Edgex } from "model";
import { useRouter } from "vue-router";
import { Status } from "@/@types/enum";

export default defineComponent({
  name: "EdgexCard",
  components: {
    EdgexTag,
    StarTwoTone,
  },
  props: {
    edgex: {
      type: Object as PropType<Edgex>,
      required: true,
    },
    follow: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const edgex = reactive(props.edgex);
    const description = computed(() => edgex.description);
    const prefix = computed(() => edgex.prefix);
    const created_time = computed(() => edgex.created_time);
    const id = computed(() => edgex.edgex_id);
    const status = computed(() =>
      edgex.status === Status.ENABLED ? "可用" : "不可用"
    );
    const followed = computed(() => edgex.is_follow);
    const name = computed(() => edgex.edgex_name);
    const router = useRouter();
    const goDetail = () => {
      router.push({
        name: "EdgexDetail",
        params: {
          prefix: prefix.value,
        },
        query: {
          id: id.value,
        },
      });
    };
    return {
      description,
      prefix,
      created_time,
      id,
      status,
      name,
      goDetail,
      followed,
    };
  },
});
</script>

<style scoped lang="scss"></style>
